<script setup lang="ts">
import { onMounted, ref } from "vue";

// 表格加载
const loading = ref(false);
// 当前页码
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
// 检索词
const searchText = ref("");

// 页面装载完成立刻执行
onMounted(() => {
  getTableList();
});

// 获取数据列表
const getTableList = () => {
  loading.value = true;
  const params = {
    pageSize: pageSize.value,
    pageNum: currentPage.value
  };
  if (searchText.value) {
    params["data"] = searchText.value;
  }
  // getAntiqueListApi(params)
  //   .then(res => {
  //     if (res.code === 0) {
  //       tableData.value = res.data.list;
  //       total.value = res.data.total;
  //     }
  //     loading.value = false;
  //   })
  //   .catch(() => {
  //     loading.value = false;
  //   });
};
</script>

<template>
  <div class="welcome">
    <div class="dashboard-editor-container" style="padding-top: 15%">
      <div style="width: 100%; text-align: center">
        <h1 style="font-size: 40px">RepChain区块链浏览器</h1>
      </div>
      <!--      <div class="mt-4">-->
      <!--        <el-input-->
      <!--          placeholder="请输入关键词"-->
      <!--          size="large"-->
      <!--          class="input-with-select"-->
      <!--          v-model="searchText"-->
      <!--        >-->
      <!--          <template #append>-->
      <!--            <el-button-->
      <!--              type="primary"-->
      <!--              size="large"-->
      <!--              :icon="Search"-->
      <!--              @click="search"-->
      <!--            ></el-button>-->
      <!--          </template>-->
      <!--        </el-input>-->
      <!--      </div>-->
      <!--      <div class="table-container">-->
      <!--        <el-table-->
      <!--          :data="tableData"-->
      <!--          style="width: 100%"-->
      <!--          v-loading="loading"-->
      <!--          highlight-current-row-->
      <!--          :header-cell-style="headerCellStyle"-->
      <!--        >-->
      <!--          <el-table-column type="index" :label="'编号'" width="100">-->
      <!--            <template #default="scope">-->
      <!--              <el-link-->
      <!--                type="primary"-->
      <!--                :icon="Link"-->
      <!--                @click="infoView(scope.row.ANTIQUE_ID)"-->
      <!--              >-->
      <!--                {{ scope.row.ANTIQUE_ID }}-->
      <!--              </el-link>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column-->
      <!--            prop="CHAIN_HEIGHT"-->
      <!--            label="实际区块链上位置"-->
      <!--            width="200"-->
      <!--          >-->
      <!--            <template #default="scope">-->
      <!--              <el-popover-->
      <!--                placement="top-start"-->
      <!--                :title="-->
      <!--                  '区块：' +-->
      <!--                  (scope.row.CHAIN_HEIGHT ? scope.row.CHAIN_HEIGHT : '(无)')-->
      <!--                "-->
      <!--                :width="400"-->
      <!--                trigger="hover"-->
      <!--                :content="-->
      <!--                  '交易ID：' +-->
      <!--                  (scope.row.CHAIN_TX_ID ? scope.row.CHAIN_TX_ID : '(无)')-->
      <!--                "-->
      <!--              >-->
      <!--                <template #reference>-->
      <!--                  <el-link type="warning" :icon="Link">-->
      <!--                    {{-->
      <!--                      "区块：" +-->
      <!--                      (scope.row.CHAIN_HEIGHT ? scope.row.CHAIN_HEIGHT : "(无)")-->
      <!--                    }}-->
      <!--                  </el-link>-->
      <!--                </template>-->
      <!--              </el-popover>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column type="index" label="名称" width="500">-->
      <!--            <template #default="scope">-->
      <!--              <el-link-->
      <!--                type="primary"-->
      <!--                :icon="Link"-->
      <!--                @click="infoView(scope.row.ANTIQUE_ID)"-->
      <!--              >-->
      <!--                {{ scope.row.ANTIQUE_TITLE }}-->
      <!--              </el-link>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          &lt;!&ndash;          <el-table-column prop="ANTIQUE_TITLE" label="名称" />&ndash;&gt;-->
      <!--          <el-table-column prop="ANTIQUE_INFO.lotNo" label="LOT号码" />-->
      <!--          <el-table-column prop="ANTIQUE_INFO.registerType" label="登记来源" />-->
      <!--          &lt;!&ndash;          <el-table-column prop="ANTIQUE_INFO.creationDate" label="创作年代" />&ndash;&gt;-->
      <!--          &lt;!&ndash;          <el-table-column prop="ANTIQUE_INFO.creator" label="创作者" />&ndash;&gt;-->
      <!--          &lt;!&ndash;          <el-table-column&ndash;&gt;-->
      <!--          &lt;!&ndash;            prop="ANTIQUE_INFO.currentCondition"&ndash;&gt;-->
      <!--          &lt;!&ndash;            label="现状"&ndash;&gt;-->
      <!--          &lt;!&ndash;            v-if="role === 'admin'"&ndash;&gt;-->
      <!--          &lt;!&ndash;          />&ndash;&gt;-->
      <!--          <el-table-column-->
      <!--            prop="ANTIQUE_STATUS"-->
      <!--            label="状态"-->
      <!--            :formatter="formatter"-->
      <!--            v-if="role === 'admin'"-->
      <!--          />-->
      <!--          <el-table-column label="操作" width="200" v-if="role === 'admin'">-->
      <!--            <template #default="scope">-->
      <!--              <div v-if="scope.row.CHAIN_CODE === 1">-->
      <!--                <el-tag class="ml-2" type="success">数据上链中</el-tag>-->
      <!--              </div>-->
      <!--              <div v-else>-->
      <!--                <span style="margin-right: 20px">-->
      <!--                  <el-link type="primary" @click="operate(0, scope.row)"-->
      <!--                    >解冻</el-link-->
      <!--                  >-->
      <!--                </span>-->
      <!--                <span style="margin-right: 20px">-->
      <!--                  <el-link type="warning" @click="operate(1, scope.row)"-->
      <!--                    >冻结</el-link-->
      <!--                  >-->
      <!--                </span>-->
      <!--                <span>-->
      <!--                  <el-link type="danger" @click="operate(2, scope.row)"-->
      <!--                    >销毁</el-link-->
      <!--                  >-->
      <!--                </span>-->
      <!--              </div>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--        </el-table>-->
      <!--        <div style="text-align: center">-->
      <!--          <el-pagination-->
      <!--            v-if="total > 10"-->
      <!--            :current-page="currentPage"-->
      <!--            :page-sizes="pageSizes"-->
      <!--            :page-size="pageSize"-->
      <!--            layout="total, prev, pager, next , sizes"-->
      <!--            :total="total"-->
      <!--            class="pagStyle"-->
      <!--            @size-change="handleSizePagChange"-->
      <!--            @current-change="handleCurrentPagChange"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<style module scoped>
.size {
  height: 335px;
}
</style>

<style lang="scss" scoped>
.dashboard-editor-container {
  margin: 30px;
  min-height: calc(100vh - 108px);
  background-color: #fff;

  .table-container {
    padding: 30px;

    .el-table th {
      background-color: var(--el-color-primary);
      font-weight: 200;
    }
  }

  .mt-4 {
    padding: 30px;
    text-align: center;

    .input-with-select {
      width: 80%;
    }

    .el-button {
      width: 200px;
      background-color: var(--el-color-primary) !important;
    }
  }
}

.main-content {
  margin: 0;
}

.welcome {
  height: 100%;

  .top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background: #fff;

    .left-mark {
      display: flex;
      align-items: center;

      img {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
      }

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
<style lang="scss">
.table-container {
  padding: 30px;

  .el-table th {
    background-color: var(--el-color-primary);
    font-weight: 200;
  }
}
</style>
